import React, { useState } from 'react'
import { Toast, NavBar } from 'react-vant';
import { Button, Input, Form, Dialog, Notify } from 'react-vant'
import { register } from '@/models'
import { useNavigate, useLocation } from 'react-router-dom';

export default function Step1() {
    const [form] = Form.useForm()
    const navigate = useNavigate()
    let location = useLocation()
    let { tel } = location.state
    let [disabled, setDisabled] = useState('disabled')
    const onFinish = values => {
        values.tel = tel
        console.log(values)
        register(values).then(res => {
            console.log(res);
            if (res.code === '200') {
                Notify.show({ type: 'success', message: res.message })
                Dialog.alert({
                    message: res.message,
                }).then(() => navigate('/login', { state: { tel } }))

            }
        })
    }
const input = (val)=>{
    let reg = /^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/
    if(reg.test(val)){
        setDisabled('')
    }
}
    return (
        <div>
            <NavBar
                title="注册"
                leftText="返回"
                onClickLeft={() => Toast('返回')}
                style={{ marginBottom: '20px', backgroundColor: '#fff', borderBottom: '1px solid #ccc' }}
            />
            <Form
                form={form}
                onFinish={onFinish}
                footer={
                    <div style={{ margin: '16px 16px 0' }}>
                        <Button disabled={disabled} round nativeType='submit' type='primary' block>
                            完成
                        </Button>
                    </div>
                }
            >
                <Form.Item
                    rules={[{ pattern: /^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/, required: true, message: '至少6位，包含数字，大小写字母，特殊符号' }]}
                    name='password'
                    label='密码'
                >
                    <Input onChange={input} placeholder='请输入密码' />
                </Form.Item>
            </Form>

        </div>
    )
}
